<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/element.css">
    <link rel="stylesheet" href="css/homePage.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/powerbi.js"></script>
    <script src="js/Analysis.js"></script>
    <style>
     #app {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      color: #756C83;
    }

    .el-header {
      text-align: center;
    }

    .todoinput {
      margin-bottom: 40px;
    }

    .list-row {
      height: 40px;
      background-color: #fbfbfb;
      margin-bottom: 5px;
    }

    .check {
      text-align: center;
      line-height: 40px;
    }

    .red {
      border-left: #ef5f65 2px solid;
    }

    .green {
      border-left: #B9E1DC 2px solid;
    }

    .ipcont {
      width: 90%;
      margin-top: 8px;
      border: 0;
      line-height: 24px;
      background-color: transparent;
      font-size: 16px;
      color: #756C83;
    }

    .close {
      text-align: center;
      line-height: 40px;
    }

    .el-icon-close {
      cursor: pointer;
    }

    .el-icon-close:hover {
      color: #ef5f65;
    }

    .done {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
    <div class="homePage no-celan other-page" id="homePage">
        <!--顶部导航-->
        <div class="header-top clearfix">
            <div class="logo-font fl">AIPLOT</div>
            <div class="top-nav">
                <ul class="clearfix">
                    <li class="cur"><a href="index.html">首页</a></li>
                    <li><a href="business.html">生意状况</a></li>
                    <li><a href="details.html">商品详情</a></li>
                    <li><a href="activity.html">活动信息</a></li>
                </ul>
            </div>
            <div class="header-top-right clearfix">
                <ul class="top-operation clearfix">
                    <li class="cur">
                        <div class="eye-icon">
                            <span></span>
                        </div>
                    </li>
                    <li>
                        <div class="setUp-icon">
                            <span></span>
                        </div>
                    </li>
                </ul>
                <ul class="clearfix top-tips">
                    <!--<li class="search-md">
                        <input type="text" placeholder="搜索报告和帮助内容">
                        <span><img src="img/search.png" alt=""></span>
                    </li>-->

                    <li class="UserTips">
                        <p>Hello <span>sam</span></p>
                    </li>
                    <li class="information">
                        <div style="width: 40px;height: 40px;background-color: #00baad;display: inline-block"></div>
                    </li>
                </ul>
                <!--管理弹框-->
                <div class="userXinxi layer" id="userXinxi">
                    <!--<span class="glyphicon glyphicon-remove close"></span>-->
                    <ul class="clearfix">
                        <li class="logout">
                            <span class="glyphicon glyphicon-log-in"></span> 退出
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--顶部导航-->


        <!--主体内容-->
        <div class="main-body">
            <!--右侧主体-->
            <div class="main-right">
                <!--右侧条件筛选-->
                <div class="condition-choose">
                    <form action="">
                        <div class="data-btn clearfix">
                            <div class="public-select public-select1">
                                <input class="platForm" opt="0" type="text" placeholder="请选择渠道" value="all"  readonly="readonly">
                                <ul>

                                </ul>
                                <span class="on-off-select"></span>
                            </div>
                            <div class="public-select public-select1 width-200">
                                <input style="width: 200px" class="storeName" opt="0" type="text" placeholder="请选择店铺" value="all"  readonly="readonly">
                                <ul>

                                </ul>
                                <span class="on-off-select"></span>
                            </div>
                            <div class="public-select public-select-more">
                                <input opt="0" type="text" placeholder="请选择日期" value=""  readonly="readonly">
                                <div class="more-chose clearfix">
                                    <ul>
                                        <li class="fixedTime" time-data="1">当日查询</li>
                                        <li class="fixedTime" time-data="7">7天内查询</li>
                                        <li class="fixedTime" time-data="30">30天内查询</li>
                                        <li class="zidingyi">自定义查询</li>
                                    </ul>
                                    <ol>
                                        <li id="choseTime1" class="clearfix">
                                            <label for="day1">按日查询</label>
                                            <el-date-picker id="day1"
                                              v-model="value1"
                                              type="date"
                                              @change="change"
                                              placeholder="选择日期">
                                            </el-date-picker>
                                        </li>
                                        <li id="choseTime2"  class="clearfix">
                                            <label for="week1">按周查询</label>
                                            <el-date-picker id="week1"
                                              v-model="value3"
                                              type="week"
                                               @change="change"
                                              format="yyyy 第 WW 周"
                                              placeholder="选择周">
                                            </el-date-picker>
                                        </li>
                                        <li id="choseTime3"  class="clearfix">
                                            <label for="month1">按月查询</label>
                                            <el-date-picker id="month1"
                                              v-model="value4"
                                              type="month"
                                              @change="change"
                                              placeholder="选择月">
                                            </el-date-picker>
                                        </li>
                                    </ol>
                                </div>
                                <span class="on-off-select"></span>
                                <div class="timeModule"><span class="tjTimeS">2019-04-07</span><span>　至　</span><span class="tjTimeE">2019-04-13</span></div>
                            </div>
                        </div>
                        <div class="condition-btn">
                            <button class="reset-btn" type="reset">重置</button>
                            <button class="application querenguo" type="button">应用</button>
                        </div>
                    </form>
                </div>
                <!--右侧条件筛选-->
                <div class="content-main clearfix">
                    <div class="content-module">
                        <div class="module-title">
                            <span>生意主要指标</span>
                        </div>
                        <div class="module-01">
                            <div class="main1-con-qiehuan clearfix">
                                <div class="main1-con-tab1 xuanxiang">
                                    <div class="main1-tab-left current">
                                        <span class="font-10 gmvName">支付金额</span>
                                        <p class="gmvData font-30 color-ql"></p>
                                        <span class="gmvDataL font-10"></span><div id="jt004" class="jiantou-icon"></div>
                                    </div>
                                </div>
                                <div class="main1-con-tab2 xuanxiang">
                                    <div class="main1-tab-left">
                                        <span class="font-10">UV</span>
                                        <p class="gmvData font-30 color-fs"></p>
                                        <span class="gmvDataL"></span><div id="jt005" class="jiantou-icon"></div>
                                    </div>
                                </div>
                            </div>
                            <!--图表插入区域-->
                            <div class="main1-con-tb1">
                                <div class="tubiao tu1">
                                    <div class="no-border tu11" id="reportContainer" style='width: 608px; height: 300px;'></div>
                                </div>
                                <div class="tubiao tu2">
                                    <div class="no-border tu22" id="reportContainer1" style='width: 608px; height: 300px;'></div>
                                </div>
                                <div class="main00-footer">
                                    <a class="font-10" href="javascript:;">生意详细数据</a>
                                </div>
                                <div class="gantan"><img src="img/gantan.png"></div>
                            </div>
                        </div>
                    </div>
                    <div class="content-module">
                        <div class="module-title">
                            <span>目标</span>
                        </div>
                        <div class="module-02">
                            <ul class="clearfix module-02-data">

                            </ul>
                            <div class="main1-con">
                                <div class="tu3">
                                    <div class="no-border tu33" id="reportContainer2" style='width: 274px; height: 300px;'></div>
                                </div>
                                <div class="main00-footer">
                                    <a class="font-10" href="javascript:;">计划详细拆解</a>
                                </div>
                                <div class="gantan"><img src="img/gantan.png"></div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-right: 0" class="content-module">
                        <div class="module-title">
                            <span>用户数</span>
                        </div>
                        <div class="module-03">
                            <div class="user-nb1 user-nblist">
                                <span>品牌总用户数</span>
                                <p class="number-size1">800,840</p>
                            </div>
                            <div class="user-nb2 user-nblist">
                                <span>所选时间段内活跃用户数</span>
                                <p class="number-size1">10,840</p>
                                <div>占总数的百分比: <span>2.20</span></div>
                            </div>
                            <div class="user-nb3 user-nblist">
                                <span>所选时间段内老用户数</span>
                                <p class="number-size1">1,840</p>
                                <div>占总数的百分比: <span>0.20</span></div>
                            </div>
                            <div class="user-nb4 user-nblist">
                                <a class="font-10" href="javascript:;">活跃用户报告</a>
                            </div>
                            <div class="gantan"><img src="img/gantan.png"></div>
                        </div>
                    </div>
                    <div class="content-module">
                        <div class="module-title">
                            <span>趋势健康指标</span>
                        </div>
                        <div class="module-04">
                            <div class="main1-con-qiehuan clearfix">
                                <div class="main1-con-tab1 current xuanxiang1">
                                    <div class="main1-tab-left">
                                        <span class="font-10 jkName">客单价</span>
                                        <p class="kdjiaData0 font-30 color-ql">90000</p>
                                        <div class="font-10">同期<span class="kdjiaData1">90000</span><div id="jt001" class="jiantou-icon"></div></div>
                                    </div>
                                </div>
                                <div class="main1-con-tab3 xuanxiang1">
                                    <div class="main1-tab-left">
                                        <span class="font-10 jkName">折扣率</span>
                                        <p class="zhekouData0 font-30 color-ql">90000</p>
                                        <div class="font-10">同期<span class="zhekouData1">90000</span><div id="jt003" class="jiantou-icon"></div></div>
                                    </div>
                                </div>
                                <div class="main1-con-tab2 xuanxiang1">
                                    <div class="main1-tab-left">
                                        <span class="font-10 jkName">售罄率</span>
                                        <p class="qinshoulv font-30 color-ql">90000</p>
                                    </div>
                                </div>
                            </div>
                            <!--图表插入区域-->
                            <div class="main1-con-tb3">
                                <div class="tubiao tubiao3 tu4">
                                    <div class="no-border tu44" id="reportContainer3" style='width: 985px; height: 300px;'></div>
                                </div>
                                <div class="tubiao tubiao5 tu6">
                                    <div class="no-border tu66" id="reportContainer5" style='width: 985px; height: 300px;'></div>
                                </div>
                                <div class="tubiao tubiao4 tu5">
                                    <div class="no-border tu55" id="reportContainer4" style='width: 985px; height: 300px;'></div>
                                </div>
                                <div class="main00-footer">
                                    <a class="font-10" href="javascript:;">生意详细数据</a>
                                </div>
                                <div class="gantan"><img src="img/gantan.png"></div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-right: 0" class="content-module">
                        <div class="module-title">
                            <span>指标简报</span>
                        </div>
                        <div class="module-05">
                            <div class="zbjb zbjb1">
                                <p><span>客单价</span><span class="zbjb11 number-size">1111111</span></p>
                          <!--      <p><span>同比段</span><span class="zbjb12 zbjbColor"></span><span class="zbjb13 zbjbColor number-size"></span></p>
                                <p><span>环比</span><span class="zbjb14 zbjbColor"></span><span class="zbjb15 zbjbColor number-size"></span></p>-->
                            </div>
                            <div class="zbjb zbjb2">
                                <p><span>客单件</span><span class="zbjb21">1111111</span></p>
                            <!--    <p><span>同比段</span><span class="zbjb22 zbjbColor"></span><span class="zbjb23 zbjbColor number-size"></span></p>
                                <p><span>环比</span><span class="zbjb24 zbjbColor"></span><span class="zbjb25 zbjbColor number-size"></span></p>-->
                            </div>
                            <div class="zbjb zbjb3">
                                <p><span>折扣率</span><span class="zbjb31">1111111</span></p>
                            <!--    <p><span>同比段</span><span class="zbjb32 zbjbColor"></span><span class="zbjb33 zbjbColor number-size"></span></p>
                                <p><span>环比</span><span class="zbjb34 zbjbColor"></span><span class="zbjb35 zbjbColor number-size"></span></p>-->
                            </div>
                            <div class="main00-footer">
                                <a class="font-10" href="javascript:;">健康监控报告</a>
                            </div>
                            <div class="gantan"><img src="img/gantan.png"></div>
                        </div>
                    </div>
                    <div class="content-module">
                        <div class="module-title">
                            <span>生意漏斗</span>
                        </div>
                        <div class="module-06">
                            <div class="main1-con">
                                    <img src="img/syld.png" alt="">
                                    <div class="yld-data yld-data1">
                                        <p>支付退款金额</p><span class="sy1 number-size">25,684</span>
                                    </div>
                                    <div class="yld-data yld-data2">
                                        <p>快递退款金额</p><span class="sy2 number-size">25,684</span>
                                    </div>
                                    <div class="yld-data yld-data3">
                                        <p>下单金额</p><span class="sy3 number-size">25,684</span>
                                    </div>
                                    <div class="yld-data yld-data4">
                                        <p>支付金额</p><span class="sy4 number-size">25,684</span>
                                    </div>
                                    <div class="yld-data yld-data5">
                                        <p>支付买家数</p><span class="sy5 number-size">25,684</span>
                                    </div>
                                    <div class="yld-data yld-data6">
                                        <p>发货金额</p><span class="sy6 number-size">25,684</span>
                                    </div>
                                    <div class="yld-data yld-data7">
                                        <p>实际到账金额</p><span class="sy7 number-size">25,684</span>
                                    </div>
                                    <div class="yld-data yld-data8">
                                        <p>最近更新日期：</p><span class="sy8 number-size">25,684</span>
                                    </div>

                                    <!--<div class="yld-data yld-data9">
                                        <span class="sy9 number-size">42.87%</span>
                                    </div>
                                    <div class="yld-data yld-data10">
                                        <span class="sy10 number-size">42.87%</span>
                                    </div>-->
                                    <div class="yld-data yld-data11">
                                        <span class="sy11 number-size">42.87%</span>
                                    </div>
                                    <div class="yld-data yld-data12">
                                        <span class="sy12 number-size">42.87%</span>
                                    </div>
                                    <div class="yld-data yld-data13">
                                        <span class="sy13 number-size">42.87%</span>
                                    </div>
                                    <div class="gantan"><img src="img/gantan.png"></div>
                                </div>
                        </div>
                    </div>
                    <div class="content-module">
                        <div class="module-title">
                            <span>平台访客数</span>
                        </div>
                        <div class="module-07">
                            <div class="main1-con">
                                <div class="tu7">
                                    <div class="no-border tu77" id="reportContainer7" style='width: 293px; height: 300px;'></div>
                                </div>
                                <div class="main00-footer">
                                    <a class="font-10" href="javascript:;">平台访客数报告</a>
                                </div>
                                <div class="gantan"><img src="img/gantan.png"></div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-right: 0" class="content-module">
                        <div class="module-title">
                            <span>平台支付金额</span>
                        </div>
                        <div class="module-08">
                            <div class="main1-con">
                                <div class="tu8">
                                    <div class="no-border tu88" id="reportContainer8" style='width: 293px; height: 300px;'></div>
                                </div>
                                <div class="main00-footer">
                                    <a class="font-10" href="javascript:;">平台支付金额报告</a>
                                </div>
                                <div class="gantan"><img src="img/gantan.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <div class="content-1200">
                        <ul class="clearfix">
                            <li>©2019 Innshine</li>
                            <li><a href="javascript:;">AiPLOT 首页</a></li>
                            <li><a href="javascript:;">服务条款</a></li>
                            <li><a href="javascript:;">隐私权政策</a></li>
                            <li><a href="javascript:;">发送反馈</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--右侧主体-->
        </div>
        <!--主体内容-->
    </div>






    <!--弹框-->
    <div class="layer1">
        <div class="main">
            <a class="close1">×</a>
            <div class="tips">
                <p>提示!</p>
            </div>
            <div class="content">数据错误</div>
        </div>
    </div>
    <!--弹框-->
    <!--tips弹框-->
    <div class="fixed"></div>
    <div class="fixedmain">
        <span class="close_re"><img src="img/close_re.png" ></span>
        <div class="main-con"></div>
    </div>
</body>
</html>




